<template>
    <view class="rechargePersonTimes">
        <view class="v-center topWrap">
            <image src="./static/diamondIcon.svg" style="width: 48rpx;height: 44rpx;margin-right: 38rpx;"/>
            <text style="font-size: 24rpx;color: #333333;">当前剩余人工导题数量：200道</text>
        </view>
        <view class="flex between" style="flex-wrap: wrap;padding:40rpx 30rpx ;">
            <view v-for="item in rechargeList" 
                    class="itemStyle" 
                    :style="{borderColor:selectPriceType==item.nowPrice?'#37B874':'#fff'}" 
                    @click="selectPriceType=item.nowPrice">
                <view class="topText">
                    <text style="font-size: 32rpx;">人工导题</text>
                    <text style="font-size: 24rpx;margin-left: 10rpx;">{{ item.count }} 道</text>    
                </view>
                <view class="ceText">
                    <text style="font-size: 32rpx;">￥</text>
                    <text style="font-size: 56rpx;">{{ item.nowPrice}}</text>
                </view>
                <view class="bottomText">￥{{ item.price  }}</view>
                <image src="./static/VIcon.png" class="bottomIcon"/>
            </view>
        </view>
        <view class="bottomInfoWrap">
                <view class="v-center" @click="isRead = !isRead">
                    <image :src="`./static/${isRead?'selectIcon':'noSelectIcon'}.svg`" style="width: 32rpx;height: 32rpx;margin-right: 10rpx;"/>
                    <text  style="font-size: 24rpx;color: #666;">我已阅读并同意
                        <text style="color: #37B874;">《付费购买服务协议》</text>
                    </text>
                </view>
                <view class="bottomBtn">
                    确认协议并立即购买
                </view>
            </view>
    </view>
</template>

<script>

export default {
    name: 'aiQuestionPage',
    data() {
        return {
            // 安全区域
            safeAreaInsets: { bottom: 0 },
            //充值数据源
            rechargeList:[
                {
                    // 数据量
                    count: 200,
                    // 原价
                    price: 260,
                    // 现价
                    nowPrice: 200,
                },
                {
                    count: 300,
                    price: 780,
                    nowPrice: 560,
                },
                {
                    count: 600,
                    price: 1000,
                    nowPrice: 800,
                },
                {
                    count: 1000,
                    price: 1200,
                    nowPrice: 1000,
                },
               
            ],
            // 选择的类型
            selectPriceType:200, 
            // 是否阅读
            isRead:false
        };
    },
    methods: {
        
    },
    mounted() {
        // Add your mounted logic here
    },
    beforeMount() {
        uni.getSystemInfo({
            success: (res) => {
                console.log(res.safeAreaInsets)
                // this.windowWidth = res.windowWidth
                // this.windowHeight = res.windowHeight
                this.safeAreaInsets = res.safeAreaInsets
            }
        })
    },
   computed:{
      
    }
};
</script>

<style scoped lang="scss">
    .rechargePersonTimes{
        height: 100vh;
        box-sizing: border-box;
        background-color: #fff;
        .topWrap{
            padding: 40rpx;
            padding-top: 54rpx;
            border-bottom: 1rpx solid #F2F2F2;
        }
        .itemStyle{
            width: calc(50% - 20rpx);
            height: 260rpx;
            box-shadow: 0px 1px 5px 0px #00000014;
            margin-top: 40rpx;
            padding-top: 26rpx;
            padding-left: 32rpx;
            box-sizing: border-box;
            position: relative;
            border: 1rpx solid #37B874;
            border-radius: 8rpx;
            .topText{
                font-size: 24rpx;
                color: #333;
            }
            .ceText{
                color:#37B874;
                font-weight: bold;
                margin: 16rpx 0;
            }
            .bottomText{
                font-size: 28rpx;
                text-decoration: line-through;
                color: #666;
            }
            .bottomIcon{
                position: absolute;
                bottom: 0;
                right: 0;
                width: 170rpx;
                height: 158rpx;
               
            }

        }
        .bottomInfoWrap{
            position: absolute;
            left: 30rpx;
            bottom: 10%;
            .bottomBtn{
                width: calc(100vw - 60rpx);
                display: flex;
                align-items: center;
                justify-content: center;
                height: 90rpx;
                box-shadow: 0px 1px 8px 0px #00000014;
                border-radius: 24rpx;
                bottom: 160rpx;
                background-color: #37B874;
                color: #fff;
                margin-top: 40rpx;
            }
        }
    }
</style>